<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>事件日历</title>
    <link rel="stylesheet" href="calendar.css">
</head>
<body>
<div style="padding:25px"><div class='calendar' id='calendar'></div></div>
<div>

</div>
<script src="calendar.js"></script>
<!--<script src="../jquery/jquery.min.js"></script>-->
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
    var arr = [
        {"date":"20170901","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170902","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170903","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170904","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170905","appoint":"1","arrived":"2","order":"2"},
        {"date":"20170906","appoint":"5","arrived":"2","order":"3"},
        {"date":"20170907","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170908","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170909","appoint":"4","arrived":"2","order":"3"},
        {"date":"20170910","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170911","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170912","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170913","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170914","appoint":"1","arrived":"5","order":"3"},
        {"date":"20170915","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170916","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170917","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170917","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170918","appoint":"1","arrived":"4","order":"3"},
        {"date":"20170919","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170920","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170921","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170922","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170923","appoint":"4","arrived":"2","order":"3"},
        {"date":"20170924","appoint":"1","arrived":"2","order":"9"},
        {"date":"20170925","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170926","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170927","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170928","appoint":"1","arrived":"2","order":"3"},
        {"date":"20170929","appoint":"12","arrived":"2","order":"3"},
        {"date":"20170930","appoint":"1","arrived":"2","order":"3"}
    ];
    var data =[
        {"time":"8:00","appoint":"7","arrived":"2","order":"3"},
        {"time":"9:00","appoint":"7","arrived":"2","order":"3"},
        {"time":"10:00","appoint":"7","arrived":"7","order":"3"},
        {"time":"11:00","appoint":"4","arrived":"7","order":"6"},
        {"time":"12:00","appoint":"1","arrived":"7","order":"3"},
        {"time":"13:00","appoint":"1","arrived":"7","order":"3"},
        {"time":"14:00","appoint":"1","arrived":"2","order":"3"},
        {"time":"15:00","appoint":"5","arrived":"4","order":"3"},
        {"time":"16:00","appoint":"1","arrived":"2","order":"4"},
        {"time":"17:00","appoint":"6","arrived":"2","order":"3"},
        {"time":"18:00","appoint":"1","arrived":"2","order":"3"},
        {"time":"19:00","appoint":"1","arrived":"3","order":"5"},
        {"time":"20:00","appoint":"3","arrived":"2","order":"3"},
        {"time":"21:00","appoint":"1","arrived":"2","order":"3"},
        {"time":"22:00","appoint":"1","arrived":"2","order":"3"}
    ];
    // 调用 id,时间数组,回调函数
    /*calendar.dates({
        id:"calendar"
    });*/
    /*calendar.dates({
        id:"calendar",
        dateArr:arr
    });*/
    var tbodyDom = function(data){
        var pDom = document.getElementById("timeTable");
        var tr = "";
        for(var i = 0;i < data.length;i++){
            var tdData = data[i];
            var td = "";
            for(var j in tdData){
                td += "<td>" + tdData[j] + "</td>";
            }
            tr += "<tr>" + td + "</tr>"
        }
        pDom.getElementsByTagName("tbody")[0].innerHTML = tr;
    };
    var doSomething = function(date){
        var url = "";
        if(date.length > 6){
            url = "calendarTime.json";
        }
        if(date.length <= 6){
            url = "calendar.json";
        }
        $.ajax({
            url:url,
            data:{},
            type:"post",
            dataType:"json",
            success:function(data){
                console.log(data)
                if(typeof data.time != "undefined"){
                    tbodyDom(data.time);
                }
                if(typeof data.date != "undefined"){
                    calendar.dates({
                        id:"calendar",
                        dateArr:data.date,
                        callback:function(n){
                            doSomething(n.date);
                        }
                    });
                }
            },
            error:function(){console.log("请求失败")}
        });
    };
    calendar.dates({
        id:"calendar",
        dateArr:arr,
        callback:function(n){
            var date = n.date;
            doSomething(date);
        }
    });
</script>
</body>
</html>